<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    * {
      padding: 0;
      margin: 0 auto;
    }

    a {
      text-decoration: none;
      color: #666666;
    }

    .footer {
      margin: 0 auto;
      height: 415px;
      background-color: #f5f5f5;
      padding-top: 30px;
    }

    .mod_help {
      height: 185px;
      border-bottom: 1px solid #ccc;
      padding-top: 20px;
      padding-left: 120px;
    }

    .mod_help dl {
      float: left;
      width: 200px;
    }

    .mod_help dl:last-child {
      width: 90px;
      text-align: center;
    }

    .mod_help dl dt {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .mod_copyright {
      text-align: center;
      padding-top: 20px;
    }

    header a {
      text-decoration: none;
      color: #6c6c6c;
      font-size: 30px;
    }

    .m1 {
      color: #e54d42;
      margin-top: 0;
      margin-bottom: 20px;
    }

    .m2 {
      font: 30px/1.5 -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft yahei, arial, PingFangSC-Regular, sans-serif;
      color: #333;
      text-align: center;
      text-decoration: none;
    }

    a1 {
      font: 30px/1.5 -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft yahei, arial, PingFangSC-Regular, sans-serif;
      color: #333333;
      font-size: 35px;
      text-decoration: none;
      margin-left: 10px;

    }
  </style>
</head>
<body>
<!--头部-->
<div style="width: 1200px;margin: 0 auto;background-color: #fff">
  <a href="/"><img src="../imgs/logo.png" style="width: 50px;margin-left: 50px;vertical-align: middle" alt="" ></a>
  <a href="index.html" style="margin-left: 130px">首页</a><el-divider direction="vertical"></el-divider>
  <a href="fashourili.html" style="margin-left: 50px">发售日历</a><el-divider direction="vertical"></el-divider>
  <a href="aboutus.html" style="margin-left: 50px">关于我们</a><el-divider direction="vertical"></el-divider>
  <a href="helloeui.html" style="margin-left: 50px">公告</a><el-divider direction="vertical"></el-divider>
  <a href="personal.html" style="margin-left: 50px">个人中心</a><el-divider direction="vertical"></el-divider>
  <span style="margin-left: 200px;"><a href="login.html">登录</a>
  |
    <a href="reg.html">注册</a></span>
</div>
<div id="app">
  <el-container>
    <el-header height="1px">
    </el-header>

    <el-main style="width: 1200px;margin: 0 auto;align:center">
      <!--风险提示-->
      <div class="m1" style="float: left">
        <marquee>风险提示:购买行为请基于真实消费和收藏需求，平台坚决反对数字藏品炒作、场外交易、欺诈、非法、侵权等方式使用的违法违规行为。</marquee>
      </div>
      <el-row gutter="20">
        <el-col span="24">
          <!--轮播图开始-->
          <el-carousel height="300px">
            <el-carousel-item>
              <img src="../imgs/a.png" width="100%" alt="">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../imgs/b.jpg" width="100%" alt="">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </el-col>
      </el-row>

      <!--发售日历-->
      <div class="m2" align="center">
        <span><i class="el-icon-date"></i>发售日历</span>
      </div>

      <!--            商品展示-->
      <el-row gutter="20">
        <el-col style="margin: 5px 0" span="8" v-for="p in productArr">
          <el-card>
            <b style="margin-top: 20px;font-size: 20px">{{p.time}}</b>
            <div style="float: right;">
              <button style="margin-bottom:3px;width:70px;height:50px;border-radius: 6px;
                            text-align: center;background-color: chartreuse;color: black;
                            border: 2px solid #4CAF50;font-size: 20px">抢购
              </button>
            </div>
            <img :src="p.url" width="100%" alt="">
            <div>
              <p style="font-size: 25px;height: 60px;margin-top: 20px">
                {{p.title}}</p>
              <p style="font-size: 20px;">
                发行量：<b>{{p.num}}</b>份</p>
              <p style="font-size: 35px;color:#ffff00;margin-top: 10px">
                ￥<b>{{p.price}}</b></p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="m2" style="margin-top: 20px">
        <a id="a1" href="">查看全部</a><img src="../imgs/1.c.png" alt="">
      </div>
    </el-main>
  </el-container>
</div>

<!--尾部-->
<footer class="footer" style="width: 1200px;margin: 0 auto;background-color: #fff">
  <div class="w">
    <div class="mod_copyright">
      <div class="mod_help">
        <img src="../imgs/logo.png" style="float: left;width: 100px;">
        <dl>
          <dt>联系我们</dt>
          <dd><a href="/">微信</a></dd>
        </dl>
        <dl>
          <dt>关于我们</dt>
          <dd><a href="/">关于星元</a></dd>
          <dd><a href="#">星元公众号</a></dd>
        </dl>
        <dl>
          <dt>用户协议</dt>
          <dd><a href="#">用户使用条款</a></dd>
          <dd><a href="#">隐私政策</a></dd>
          <dd><a href="#">消费者权益保障</a></dd>
        </dl>
        <dl>
          <dt>帮助中心</dt>
          <dd>
          <dd><a href="/">常见问题</a></dd>
          <img src="../imgs/logo.png" style="width: 80px;">
          我的客服
          </dd>
        </dl>
      </div>
      <div class="copyright">
        地址：北京市昌平区建材城西路金燕龙动公楼一层邮编：100096电话：
        400-618-4000传真：g1g-82935100邮箱：zhanghj+itcast.cn<br>
        京ICP备08001421号京公网安备110108007702
      </div>
    </div>
  </div>
</footer>

</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        wd: "",
        productArr: [{
          time: "2022-06-23 22:00",
          title: "世界难忘北京激情",
          price: 88.00,
          url: "../static/imgs/1.1.jpg",
          num: 1000
        },
          {time: "2022-06-23 22:00", title: "北京，今晚", price: 26.66, url: "../static/imgs/1.2.jpg", num: 1000},
          {
            time: "2022-06-23 22:00",
            title: "开幕式为中国赢得尊敬",
            price: 65.00,
            url: "../static/imgs/1.3.jpg",
            num: 1000
          },
          {
            time: "2022-06-23 22:00",
            title: "奶龙·玉树临风",
            price: 29.00,
            url: "../static/imgs/1.4.jpg",
            num: 1000
          },
          {time: "2022-06-23 22:00", title: "牛魔", price: 60.00, url: "../static/imgs/1.5.jpg", num: 1000},
          {time: "2022-06-23 22:00", title: "土地魔", price: 36.80, url: "../static/imgs/1.6.jpg", num: 1000},
          {
            time: "2022-06-23 22:00",
            title: "Mini EV 红色",
            price: 69.00,
            url: "../static/imgs/1.7.jpg",
            num: 1000
          },
          {
            time: "2022-06-23 22:00",
            title: "大美大艺·荣曜同禄",
            price: 24.49,
            url: "../static/imgs/1.8.jpg",
            num: 1000
          },
          {time: "2022-06-23 22:00", title: "航天尊", price: 22.00, url: "../static/imgs/1.9.jpg", num: 1000}]


      }
    },
    methods: {}
  })
</script>

</html>





